<template>
	<view>
		<!-- 顶部 -->
		<view class="main-header">
			<view class="main-project  uni-ellipsis">
				<view class="uni-font-32" @click="getNav('login')">
					<text v-show="hasLogin === false">请登录</text>
					<text v-show="hasLogin === true && hasBoundHouse === false">请绑定房产</text>
					<view v-show="hasLogin === true && hasBoundHouse === true && myHouse.ownerInfo.villagename">
						<image src="/static/images/addr.png" mode="aspectFit" style="width: 30upx;height: 30upx;margin-right: 10upx;vertical-align: middle;"></image>
						<text style="vertical-align: middle;font-weight: 600;">{{ myHouse.ownerInfo.villagename }}</text>
					</view>
				</view>
			</view>
		</view>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :top="150" downLoadingText="正在刷新..." :enablePullUp="false">
			<view class="main">
				<view class="main-content">
					<view style="margin: 0 20upx 20upx;">
						<!-- 轮播图 -->
						<view class="main-banner">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(item, index) in banners" :key="index"><image :src="item" mode="widthFix"></image></swiper-item>
							</swiper>
						</view>
						<!-- 菜单按钮 -->
						<view class="main-grad-8">
							<uni-grid :column="4" :highlight="true">
								<uni-grid-item v-for="(item, index) in list" :key="index" style="margin-top: 20upx;">
									<view @click="getNav(item.url, item.id)">
										<view class="uni-flex-center"><image :src="item.src" class="image" mode="aspectFill" /></view>
										<view class="text" style="text-align: center;">{{ item.text }}</view>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</view>
				</view>
				<!-- 通知公告 -->
				<view class="notice-wrapper">
					<view class="notice-title">通知公告</view>
					<view class="notice-content">
						<view class="notice-item">
							<text class="text" v-if="noticeList" @click="noticeDetail">{{ noticeList.name }}</text>
							<text class="text" v-else>暂无新的通知公告</text>
						</view>
					</view>
				</view>
				<!-- 我的管家 -->
				<view class="uni-flex-center" style="margin: 20upx;background-color: #fff;border-radius: 10upx;" v-if="housekeeper">
					<view class="housekeeper uni-cell-90 uni-flex-btw" @click="toHousekeeper">
						<view class="uni-cell-20 uni-flex-center"><image :src="housekeeprImg" mode="aspectFit" class="housekeeper-header"></image></view>
						<view class="uni-cell-30 uni-flex-center" style="text-align: left">
							<view style="height: 100upx;">
								<view class="uni-font-36" style="color: #333;font-weight: 500;">{{ housekeeper.realname }}</view>
								<view class="uni-font-28" style="color: #ccc;">您的专属管家</view>
							</view>
						</view>
						<view class="uni-cell-20"></view>
						<view class="uni-cell-30 uni-flex-center"><view class="housekeeper-btn">呼叫管家</view></view>
					</view>
				</view>
				<!-- 为你推荐部分 -->
				<view class="recommend" v-if="showGoods && recommendList.length > 0">
					<view class="title">为你推荐</view>
					<view class="recd-wrapper">
						<view class="recd-item" v-for="(item, index) in recommendList" :key="index" @click="goodsClick(item)">
							<image :src="item.cover_pic" mode="aspectFill"></image>
							<view class="name">{{ item.name }}</view>
							<text class="text1">已售{{ item.virtual_sales }}</text>
							<text class="text2">/</text>
							<text class="text3">剩余{{ item.goods_num }}</text>
							<view class="price-car">
								<text class="current">￥{{ item.purchase_price }}</text>
								<text class="old">￥{{ item.original_price }}</text>
								<uni-icons type="cart" class="cart"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-flex-center">
					<view class="main-topic uni-cell-90"><view class="title"></view></view>
				</view>
				
				<view class="idxMainBox" >
					<h3>为你推荐</h3>
					<view class="shopLt" v-for="(item, index) in contTwoList" :key="index">
						<product-card :product="item"></product-card>
					</view>
				</view>
				
				<li-toast :showToast="showToast"></li-toast>
			</view>
		</s-pull-scroll>
	</view>
</template>
<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import liToast from '@/components/li-toast/li-toast.vue';
import sPullScroll from '@/components/s-pull-scroll';
import productCard from '@/components/product-card/product-card.vue'
export default {
	components: {
		uniGrid,
		uniGridItem,
		liToast,
		sPullScroll,
		productCard
	},
	data() {
		return {
			showToast: false,
			/*图片轮播*/
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
			noticeList: '',
			banners: ['/static/img/main/b2.png'],
			service: [
				{ img: '/static/img/main/78761498124328542.png', title: '电子礼品卡', mark: '家乐福9折' },
				{ img: '/static/img/main/78761498124328542.png', title: '手机维修', mark: '手机维修' },
				{ img: '/static/img/main/72581498124372327.png', title: '滴滴出行', mark: '滴滴出行3.0' }
			],
			contTwoList: [
				{ id: 1, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 2, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 3, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 4, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 5, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 6, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 7, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' },
				{ id: 8, imgs: '/static/img/main-banner.jpg', name: '商品商品商品商品', money: '50', yu: '50' }
			], //内容2
			list: [
				{
					url: 'notice',
					text: '通知公告',
					src: '/static/img/main/announcement.png',
					id: 1
				},
				{
					url: 'maintenance',
					text: '报事报修',
					src: '/static/img/main/repairs.png',
					id: 2
				},
				{
					url: 'maintenance',
					text: '业主投诉',
					src: '/static/img/main/complain.png',
					id: 3
				},
				{
					url: 'call',
					text: '联系物业',
					src: '/static/img/main/call-ten.png',
					id: 4
				},
				{
					url: 'choose-type',
					text: '物业缴费',
					src: '/static/img/main/tenement.png',
					id: 5
				},
				{
					url: 'appointment',
					text: '访客预约',
					src: '/static/img/main/appointment.png',
					id: 6
				},
				{
					url: 'shopping',
					text: '慧选商城',
					src: '/static/img/main/shopping.png',
					id: 7
				}
			],
			housekeeprImg: '/static/img/header-img.png',
			housekeeper: true,
			myHouse: {
				ownerInfo: {
					villagename: ''
				}
			},
			// 是否显示商品列表
			showGoods: false,
			// 推荐商品数据列表
			recommendList: []
		};
	},
	methods: {
		// 刷新
		// refresh() {
		// 	this.$nextTick(() => {
		// 		this.$refs.pullScroll.refresh();
		// 	});
		// },

		// 下拉刷新
		// pullDown(pullScroll) {
		// 	this.getData(pullScroll);
		// 	this.getIndex();
		// 	// 获取商品数据
		// 	this.$api.getGoods({}, res => {
		// 		this.recommendList = res.data;
		// 		this.showGoods = res.is_show == 1 ? true : false;
		// 	});
		// },
		moveHandle() {},
		getNav(url, id) {
			// 访客预约
			if (id == 6) {
				uni.showToast({
					icon: 'none',
					title: '功能暂未开放！'
				});
				return;
			}
			// 商城
			if (id == 7) {
				uni.navigateToMiniProgram({
					appId: 'wxb828b2bc144de444',
					path: `pages/index/index`,
					success(res) {
						console.log('跳转成功！');
					}
				});
				return;
			}
			if (!url) {
				uni.showToast({
					icon: 'none',
					title: '暂无数据...'
				});
				return;
			}
			let data = 0; //报事报修
			if (id === 3) {
				data = 1; //投诉建议
			}
			///this.$Router.push({name:url, params: { id: data } });
		},
		noticeDetail() {
			if (this.noticeList.id) {
				///this.$Router.push({ name: 'notice-detail', params: { id: this.noticeList.id } });
			}
		},
		toHousekeeper() {
			//this.$Router.push({ name: 'housekeeper', params: { id: this.housekeeper.uid } });
		},
		getData(pullScroll) {
			let data = {};
			// this.$api.userCenter(data, res => {
			// 	this.myHouse = res.data;
			// 	this.$store.commit('setMyHouse', res.data);
			// 	pullScroll.success();
			// });
		},
		/*
		 * 检测版本升级
		 */
		getIndex() {
			let data = {};
			// this.$api.homeIndex(data, res => {
			// 	this.housekeeper = res.data.stewards && res.data.stewards.length > 0 ? res.data.stewards[0] : '';
			// 	this.noticeList = res.data.circular;
			// });
		},
		// 点击商品跳转惠选商品页
		goodsClick(good) {
			uni.navigateToMiniProgram({
				appId: 'wxb828b2bc144de444',
				path: `pages/goods/goods?id=${good.id}`,
				success(res) {
					console.log('跳转成功！');
				}
			});
		}
	},
	onShow() {
		// if (this.$store.state.login_token) {
		// 	// 获取商品数据
		// 	this.$api.getGoods({}, res => {
		// 		this.recommendList = res.data;
		// 		this.showGoods = res.is_show == 1 ? true : false;
		// 	});
		// 	this.$api.userCenter({}, res => {
		// 		this.myHouse = res.data;
		// 		this.$store.commit('setMyHouse', res.data);
		// 		this.getIndex();
		// 		//检测更新
		// 	});
		// }
	},
	onLoad() {
		
	},
	computed: {
		// myHouse() {
		// 	return this.$store.state.myHouse;
		// },
		hasBoundHouse() {
			//return this.$store.state.hasBoundHouse;
		},
		hasLogin() {
			//return this.$store.state.hasLogin;
		},
		message() {
			let _this = this;
			//接收到推送消息
			if (this.$store.state.pushMessage) {
				//消息提示
				_this.showToast = true;
				setTimeout(() => {
					_this.showToast = false;
				}, 5000);
				return '/static/img/message-active.png';
			} else {
				return '/static/img/message.png';
			}
		}
	}
};
</script>

<style lang="scss">
@import './index.css';
.idxMainBox {
	width: 92%;
	margin: 0 auto;
	height: 100%;
	.shopLt {
		float: left;
		width: 48.5%;
		background: #FFFFFF;
		height: 360rpx;
		border: 1px #F2F2F2 solid;
		border-radius: 12rpx;
		transition: all 0.4s;
		margin-top: 15rpx;
	}
	
	.shopLt:nth-child(2n) {
		float: right;
	}
	
	.shopLt:active {
		background: #E2E2E2;
	}
}

.recommend {
	margin-top: 20rpx;
	padding: 0 24rpx;
	.title {
		padding: 20rpx 0;
		font-size: 36rpx;
		color: #333;
		line-height: 50rpx;
		font-weight: 600;
	}
	.recd-wrapper {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.recd-item {
			width: 340rpx;
			background-color: #fff;
			padding-bottom: 80rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			position: relative;
			image {
				width: 100%;
				height: 280rpx;
			}
			.name {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333;
				margin-top: 10rpx;
				padding: 0 10rpx;
			}
			.text1,
			.text2,
			.text3 {
				font-size: 24rpx;
				line-height: 36rpx;
				margin-top: 6rpx;
				color: #999;
			}
			.text1 {
				margin-left: 10rpx;
			}
			.text2 {
				color: #ebebeb;
				margin: 0 4rpx;
			}
			.text3 {
				color: #666;
			}
			.price-car {
				position: absolute;
				bottom: 20rpx;
				left: 0;
				padding: 0 10rpx;
				width: 100%;
				box-sizing: border-box;
				.current {
					font-size: 32rpx;
					color: #f6692b;
					line-height: 44rpx;
				}
				.old {
					font-size: 24rpx;
					line-height: 36rpx;
					color: #ccc;
					text-decoration: line-through;
					margin-left: 16rpx;
				}
				.cart {
					position: absolute;
					top: -6rpx;
					right: 10rpx;
					font-size: 36rpx !important;
					color: #ffbc19 !important;
				}
				.cart .uni-icons {
					font-size: 36rpx !important;
					color: #ffbc19 !important;
				}
			}
		}
	}
}
</style>
